<template>
    <div class="app-container">
        <el-row class="row-head" type="flex" justify="start">
            <el-col align="end" class="hidden-xs-only">
                <TypeChooseBox @changeShow="changeShow"
                ></TypeChooseBox>
            </el-col>
        </el-row>

        <el-divider></el-divider>

        <div class="questionnaire-card-ground">
            <el-row :gutter="10">
                <el-col :xs="12" :sm="6" :md="6" :lg="3" :xl="2"
                        v-for="item in questionnaireList" :key="item.questionnaireId">
                    <QuestionnaireCard class="questionnaire-card" :title="item.title" @deleteQuestionnaire="fetchData"
                                       :status="item.status" :create-time="item.createTime" :end-time="item.endTime"
                                       :id="item.questionnaireId"
                                       :description="item.description" :fill-count="item.fillCount"
                                       v-if="checkedList.indexOf(item.status)!==-1"
                    >
                    </QuestionnaireCard>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script setup name="Collection">
import TypeChooseBox from './TypeChooseBox';
import QuestionnaireCard from './QuestionnaireCard';
import { ElMessage } from 'element-plus';
import axios from 'axios';
const router = useRouter();

const questionnaireList = ref([])
const checkedList =ref(['collecting', 'editing', 'closed'])

function fetchData() {
    console.log('初始数据')
    axios.get('/adviser/getQuestionnaires').then((response) => {
        questionnaireList.value = response.data['questionnaires'];
    }).catch(() => {
        ElMessage({  
            message: 'error!问卷读取失败！',  
            type: 'error',  
        }); 
    })
}
function gotoCreate() {
    axios.get('/adviser/createQuestionnaire').then((response) => {
        router.push('/create/' + response.data['id']);
    })
}
function changeShow(data) {
    checkedList.value = data;
}
onMounted(() => {
    fetchData()
})
</script>
